<template>
	<view class="container">
		<!-- 风险偏好卡片 -->
		<u-card title="我的风险偏好" :border="false" class="risk-preference-card">
			<view slot="body">
				<view v-if="riskPreference">
					<!-- 风险等级信息 -->
					<view class="risk-level-box">
						<view class="risk-level">
							风险等级：<text :class="'risk-level-' + riskPreference.riskLevel">{{ riskPreference.riskLevel
								}}</text>
						</view>
						<view class="risk-score">
							风险评分：{{ riskPreference.score }}
						</view>
						<view class="risk-update-time">
							更新时间：{{ riskPreference.updateTime }}
						</view>
					</view>

					<!-- 仪表盘图表 -->
					<view class="flex-row mt-20">
						<view class="flex-1">
							<view class="chart-container">
								<!-- <div ref="gaugeChart" class="charts"></div> -->
								<GaugeChartVue :riskPreference="riskPreference"></GaugeChartVue>
							</view>
						</view>
					</view>

					<!-- 投资组合建议 -->
					<view class="mt-20">
						<view class="portfolio-advice" style="height: 450rpx;">
							<text class="sub-title">建议投资组合</text>
							<!-- <div id="pieChart" ref="pieChart" class="charts"></div> -->
							<PieChart :riskPreference="riskPreference"></PieChart>
						</view>
					</view>

					<!-- 风险特征分析 -->
					<view class="mt-20">
						<view class="risk-analysis">
							<text class="sub-title">风险特征分析</text>
							<!-- <div id="radarChart" ref="radarChart" class="charts"></div> -->
							<RadarChart :riskPreference="riskPreference"></RadarChart>
						</view>
					</view>

					<!-- 风险等级说明和建议 -->
					<view class="risk-advice mt-20">
						<u-card>
							<view slot="body">
								<text class="sub-title">风险偏好分析</text>
								<view class="advice-content">
									<block v-if="riskPreference.riskLevel === '保守型'">
										<u-icon name="shield" size="24"></u-icon>
										<text>您属于保守型投资者，偏好低风险投资产品，追求稳定收益。</text>
										<view class="advice-detail">
											<text>• 建议投资品种：定期存款(40%)、货币基金(40%)、债券基金(20%)</text>
											<text>• 预期年化收益：3%-4%</text>
											<text>• 风险特点：本金安全为主，收益稳定性高</text>
										</view>
									</block>
									<block v-else-if="riskPreference.riskLevel === '稳健型'">
										<u-icon name="balance" size="24"></u-icon>
										<text>您属于稳健型投资者，能够承担适度风险，追求相对稳定的收益。</text>
										<view class="advice-detail">
											<text>• 建议投资品种：债券基金(40%)、稳健型理财产品(30%)、货币基金(20%)、股票基金(10%)</text>
											<text>• 预期年化收益：4%-6%</text>
											<text>• 风险特点：追求稳定增值，可承受小幅波动</text>
										</view>
									</block>
									<block v-else-if="riskPreference.riskLevel === '平衡型'">
										<u-icon name="chart-line" size="24"></u-icon>
										<text>您属于平衡型投资者，能够接受中等风险，追求收益与风险的平衡。</text>
										<view class="advice-detail">
											<text>• 建议投资品种：混合型基金(40%)、债券基金(30%)、股票基金(20%)、货币基金(10%)</text>
											<text>• 预期年化收益：6%-8%</text>
											<text>• 风险特点：收益风险平衡，投资组合多元化</text>
										</view>
									</block>
									<block v-else-if="riskPreference.riskLevel === '进取型'">
										<u-icon name="trending-up" size="24"></u-icon>
										<text>您属于进取型投资者，能够承担较高风险，追求较高收益。</text>
										<view class="advice-detail">
											<text>• 建议投资品种：股票基金(50%)、混合型基金(30%)、债券基金(15%)、货币基金(5%)</text>
											<text>• 预期年化收益：8%-12%</text>
											<text>• 风险特点：以追求资本增值为主，可承受较大波动</text>
										</view>
									</block>
									<block v-else-if="riskPreference.riskLevel === '激进型'">
										<u-icon name="rocket" size="24"></u-icon>
										<text>您属于激进型投资者，能够承担高风险，追求高收益。</text>
										<view class="advice-detail">
											<text>• 建议投资品种：股票基金(70%)、混合型基金(20%)、债券基金(10%)</text>
											<text>• 预期年化收益：12%以上</text>
											<text>• 风险特点：追求最大化收益，能够承受剧烈波动</text>
										</view>
									</block>
								</view>
							</view>
						</u-card>
					</view>
				</view>
				<view v-else class="no-data">
					<text>暂无风险偏好数据，请进行理财操作后系统将自动分析您的风险偏好。</text>
				</view>
			</view>
		</u-card>

		<!-- 新闻资讯卡片 -->
		<u-card title="新闻资讯" :border="false" class="news-card mt-20">
			<view slot="body">
				<template v-if="newsList.length">
					<view v-for="(news, index) in newsList" :key="index" class="news-item">
						<view class="news-header">
							<text class="news-title">{{ news.title }}</text>
							<view class="news-date">
								<u-icon name="calendar" size="24" color="#999"></u-icon>
								<text>{{ formatDate(news.createtime) }}</text>
							</view>
						</view>
						<view class="news-content">
							<text>{{ news.newsdesc }}</text>
						</view>
					</view>
				</template>
				<view v-else class="no-data">
					<u-icon name="info-circle" size="48" color="#999"></u-icon>
					<text>很抱歉！暂时还没有新闻向您推荐</text>
				</view>
			</view>
		</u-card>
	</view>
</template>

<script>
	import * as echarts from 'echarts'
	// import F2 from '@antv/f2';
	import GaugeChartVue from '@/components/charts/GaugeChart.vue'
	import PieChart from '@/components/charts/PieChart.vue'
	import RadarChart from '@/components/charts/RadarChart.vue'

	export default {
		components: {
			GaugeChartVue,
			PieChart,
			RadarChart
		},
		data() {
			return {
				riskPreference: null,
				newsList: [],
				gaugeChart: null,
				pieChart: null,
				radarChart: null,
				selectedPortfolio: null,
				pageData: null
			}
		},
		computed: {
			gaugeOption() {
				return {
					series: [{
						type: 'gauge',
						startAngle: 240,
						endAngle: -60,
						min: 0,
						max: 20,
						splitNumber: 5,
						radius: '100%',
						center: ['50%', '50%'],
						axisLine: {
							lineStyle: {
								width: 30,
								color: [
									[0.15, '#28a745'], // 保守
									[0.3, '#17a2b8'], // 稳健
									[0.45, '#ffc107'], // 平衡
									[0.6, '#fd7e14'], // 进取
									[1, '#dc3545'] // 激进
								]
							}
						},
						pointer: {
							icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
							length: '15%',
							width: 20,
							offsetCenter: [0, '-20%'],
							itemStyle: {
								color: 'auto'
							}
						},
						axisTick: {
							length: 12,
							lineStyle: {
								color: 'auto',
								width: 1
							}
						},
						splitLine: {
							length: 18,
							lineStyle: {
								color: 'auto',
								width: 2
							}
						},
						axisLabel: {
							color: '#666',
							fontSize: 14,
							distance: 35,
							formatter: (value) => {
								if (value <= 3) return '保守';
								else if (value <= 6) return '稳健';
								else if (value <= 9) return '平衡';
								else if (value <= 12) return '进取';
								else return '激进';
							}
						},
						title: {
							offsetCenter: [0, '-20%'],
							fontSize: 16
						},
						detail: {
							fontSize: 28,
							offsetCenter: [0, '0%'],
							valueAnimation: true,
							formatter: '{value}',
							color: 'auto'
						},
						data: [{
							value: this.riskPreference?.score || 0,
							// name: '风险评分'
						}]
					}]
				}
			},
			pieOption() {
				// 获取当前风险等级对应的投资组合数据
				const data = this.getPortfolioData(this.riskPreference?.riskLevel)
				return {
					// 提示框配置
					tooltip: {
						trigger: 'item', // 触发类型为数据项
						formatter: '{a} <br/>{b}: {c}%' // 提示框格式：系列名 + 数据名 + 百分比
					},
					// 图例配置
					legend: {
						orient: 'vertical', // 垂直布局
						right: '5%', // 距离右侧5%
						top: 'middle', // 垂直居中
						itemWidth: 10, // 图例标记宽度
						itemHeight: 10, // 图例标记高度
						data: data.map(item => item.name) // 图例数据，从投资组合数据中提取名称
					},
					series: [{
						name: '建议配置', // 系列名称
						type: 'pie', // 图表类型为饼图
						center: ['35%', '40%'], // 饼图中心位置
						radius: ['40%', '60%'], // 饼图半径范围，创建环形图效果
						avoidLabelOverlap: false, // 防止标签重叠
						// 数据项样式
						itemStyle: {
							borderRadius: 6, // 圆角
							borderColor: '#fff', // 边框颜色
							borderWidth: 2 // 边框宽度
						},
						// 标签配置
						label: {
							show: true, // 显示标签
							position: 'inside', // 标签位置在数据项内部
							fontSize: 12, // 字体大小
							fontWeight: 'bold', // 字体粗细
							color: '#fff', // 字体颜色改为白色，提高对比度
							formatter: '{c}%', // 只显示百分比，减少文字长度
							textBorderColor: '#000', // 文字描边颜色
							textBorderWidth: 1, // 文字描边宽度
							textShadowColor: '#000', // 文字阴影颜色
							textShadowBlur: 2, // 文字阴影模糊度
							textShadowOffsetX: 1, // 文字阴影X偏移
							textShadowOffsetY: 1 // 文字阴影Y偏移
						},
						// 高亮状态配置
						emphasis: {
							label: {
								show: true,
								fontSize: 24,
								fontWeight: 'bold'
							},
							itemStyle: {
								shadowBlur: 10, // 阴影模糊大小
								shadowOffsetX: 0, // 阴影水平偏移
								shadowColor: 'rgba(0, 0, 0, 0.5)' // 阴影颜色
							}
						},
						labelLine: {
							show: false // 不显示标签引导线
						},
						data: data // 饼图数据
					}]
				}
			},
			radarOption() {
				return {
					radar: {
						indicator: [{
								name: '收益期望',
								max: 100
							},
							{
								name: '风险承受',
								max: 100
							},
							{
								name: '投资经验',
								max: 100
							},
							{
								name: '流动性需求',
								max: 100
							},
							{
								name: '投资期限',
								max: 100
							}
						],
						radius: '65%'
					},
					series: [{
						type: 'radar',
						data: [{
							value: this.getRiskFeatureData(this.riskPreference?.riskLevel),
							name: '风险特征',
							areaStyle: {
								opacity: 0.2
							}
						}]
					}]
				}
			}
		},
		async onReady() {
			let user = uni.getStorageSync("user").data
			uni.request({
				url: "/api/main/user/index",
				method: 'GET',
				data: user,
				success: (res) => {
					this.pageData = res.data
					this.riskPreference = this.pageData.riskPreference
					this.newsList = this.pageData.newsList
					// 在数据加载完成后初始化图表
					this.$nextTick(() => {
						this.initCharts();
					});
				}
			})
		},
		methods: {
			async initCharts() {
				// 确保DOM元素已经渲染
				await this.$nextTick();
				if (this.$refs.gaugeChart) {
					this.initGaugeChart();
				}
				if (this.$refs.pieChart) {
					this.initPieChart();
				}
				if (this.$refs.radarChart) {
					this.initRadarChart();
				}
			},
			initGaugeChart() {
				this.gaugeChart = echarts.init(this.$refs.gaugeChart)
				this.gaugeChart.setOption(this.gaugeOption)
				// 监听窗口大小变化
				window.addEventListener('resize', () => {
					this.gaugeChart.resize()
				})
			},
			initPieChart() {
				this.pieChart = echarts.init(this.$refs.pieChart)
				this.pieChart.setOption(this.pieOption)

				// 监听窗口大小变化
				window.addEventListener('resize', () => {
					this.pieChart.resize()
				})
			},
			initRadarChart() {
				this.radarChart = echarts.init(this.$refs.radarChart)
				this.radarChart.setOption(this.radarOption)

				// 监听窗口大小变化
				window.addEventListener('resize', () => {
					this.radarChart.resize()
				})
			},
			formatDate(date) {
				const d = new Date(date)
				return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
			},
			getPortfolioData(riskLevel) {
				const portfolioMap = {
					'保守型': [{
							value: 40,
							name: '定期存款'
						},
						{
							value: 40,
							name: '货币基金'
						},
						{
							value: 20,
							name: '债券基金'
						}
					],
					'稳健型': [{
							value: 40,
							name: '债券基金'
						},
						{
							value: 30,
							name: '稳健理财'
						},
						{
							value: 20,
							name: '货币基金'
						},
						{
							value: 10,
							name: '股票基金'
						}
					],
					'平衡型': [{
							value: 40,
							name: '混合型基金'
						},
						{
							value: 30,
							name: '债券基金'
						},
						{
							value: 20,
							name: '股票基金'
						},
						{
							value: 10,
							name: '货币基金'
						}
					],
					'进取型': [{
							value: 50,
							name: '股票基金'
						},
						{
							value: 30,
							name: '混合型基金'
						},
						{
							value: 15,
							name: '债券基金'
						},
						{
							value: 5,
							name: '货币基金'
						}
					],
					'激进型': [{
							value: 70,
							name: '股票基金'
						},
						{
							value: 20,
							name: '混合型基金'
						},
						{
							value: 10,
							name: '债券基金'
						}
					]
				}
				return portfolioMap[riskLevel] || []
			},
			getRiskFeatureData(riskLevel) {
				const featureMap = {
					'保守型': [30, 20, 40, 90, 80],
					'稳健型': [50, 40, 60, 70, 70],
					'平衡型': [60, 60, 70, 60, 60],
					'进取型': [80, 70, 80, 40, 50],
					'激进型': [90, 90, 85, 30, 40]
				}
				return featureMap[riskLevel] || [0, 0, 0, 0, 0]
			}
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-1 {
		flex: 1;
	}

	.mt-20 {
		margin-top: 20rpx;
	}

	/* 风险偏好卡片样式 */
	.risk-preference-card {
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.risk-level-box {
		background: #f8f9fa;
		padding: 30rpx;
		border-radius: 16rpx;
		width: 100%;
	}

	.risk-level {
		font-size: 48rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
		text-align: center;
		width: 100%;
	}

	.risk-level-保守型 {
		color: #28a745;
	}

	.risk-level-稳健型 {
		color: #17a2b8;
	}

	.risk-level-平衡型 {
		color: #ffc107;
	}

	.risk-level-进取型 {
		color: #fd7e14;
	}

	.risk-level-激进型 {
		color: #dc3545;
	}

	.risk-score {
		font-size: 36rpx;
		color: #666;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.risk-update-time {
		font-size: 28rpx;
		color: #999;
		text-align: center;
	}

	.chart-container {
		height: 500rpx;
		width: 100%;
		position: relative;
		margin: 20rpx 0;
	}

	.portfolio-advice,
	.risk-analysis {
		background: #fff;
		padding: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		height: 550rpx;
		position: relative;
		margin: 10rpx;
	}

	.sub-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
		text-align: center;
	}

	.advice-content {
		padding: 20rpx;
	}

	.advice-detail {
		margin-top: 20rpx;
	}

	.advice-detail text {
		display: block;
		margin-bottom: 10rpx;
	}

	/* 新闻资讯卡片样式 */
	.news-card {
		margin-top: 20rpx;
		box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.news-item {
		margin-bottom: 30rpx;
		background: #fff;
		padding: 30rpx;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.news-header {
		margin-bottom: 20rpx;
	}

	.news-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 15rpx;
		line-height: 1.4;
		display: block;
	}

	.news-date {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #999;
	}

	.news-date text {
		margin-left: 8rpx;
	}

	.news-content {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
		text-align: justify;
	}

	.no-data {
		text-align: center;
		padding: 60rpx 40rpx;
		color: #999;
		background: #f8f9fa;
		border-radius: 12rpx;
	}

	.no-data text {
		font-size: 28rpx;
		display: block;
		margin-top: 20rpx;
	}

	.charts {
		width: 100%;
		height: 100%;
	}
</style>